<template>
    <fieldset>
        <legend>响应式语法:ref</legend>
        <h1>{{counter}}</h1>
        <input type="text" ref="ipt">
        <child ref="childCom"></child>
        <ul>
            <li v-for="item in arr" :key="item.id" :ref="refFn">
                {{item}}
            </li>
        </ul>
    </fieldset>
</template>
<script setup>
import {ref,onMounted,onBeforeUpdate,watchEffect} from "vue"
// setup语法糖，等同于在选项中使用了setup
// 可以直接使用await
// let res = await Promise.resolve('123')
// console.log(res);
// 展示一个子组件
import child from "./child.vue"
// 响应式语法：ref
// 1.直接作为响应式语法来使用，
// ref会使用对象，对属性进行包裹，所有的属性都会存在ref的value属性中

// let age =30;
// let b = age;
let counter = ref(10)
// ref属性给模板使用的时候，会自动解包，在setup内部使用的时候，不要忘记了.value
// setTimeout(() => {
//     console.log(counter);
//     counter.value = 20;
// }, 2000);

// 2.作为模板引用来使用（引用dom元素，引用子组件）
let ipt = ref()
// console.log(ipt);
// console.log(ipt.value);//undefined,在beforeCreate和created之前执行，此时dom还没有被创建出来

// setTimeout(() => {
//    console.log(ipt.value)
// },);

// dom挂载之后执行的钩子函数,只能调用一次
// onMounted(()=>{
//     ipt.value.focus()
// })
// 作用在子组件上
let childCom = ref()
// onMounted只能调用一次
// onMounted(()=>{
//     ipt.value.focus()
//     console.log(childCom.value);
// })

// 3.ref在v-for里面的使用
let arr = ref(['吃','喝茶'])
let lis = ref([])
// 在虚拟dom更新之前,清空数组，避免添加重复的元素
onBeforeUpdate(()=>[
    lis.value = []
])
let refFn =(el)=>{
    console.log(el);
    lis.value.push(el)
}
console.log(lis.value);

// watchEffect在dom更新之后，执行副作用（dom操作就是属于副作用）
// 操作dom 异步请求 ...副作用
// ### watchEffect 的使用

// watchEffect 也是一个帧听器，是一个副作用函数。 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
watchEffect(()=>{
    console.log('---effect',ipt.value);
},{
    // dom更新之后回调effect中的函数
    flush:'post'
})


</script>